<template>
  <div>
    <div class="choseTime flex-r"
         style="justifyContent:space-between;">
      <div>
        <span>显示类型：</span>
        <select v-model="dateType"
                style="width: 0.72rem;height:26px;borderRadius:0.02rem;text-align:center;border:1px solid #d9d9d9;color: rgba(255,255,255,0.80);background:#405891;">
          <option value="H">时</option>
          <option value="D">天</option>
        </select>
      </div>
      <div style="width:3.4rem;"
           class="flex-r">
        <a-RangePicker :default-value="[moment(moment(new Date())), moment(moment(new Date().getTime() - (1000 * 60 * 60 * 24)))]"
                       @change="onChangeDate"
                       :disabledHours="false"
                       :bordered="true"
                       id="dateTime"
                       style="marginRight:0.02rem;"
                       :model="time"
                       :disabled-date="disabledDate" />
        <a-Button type="primary"
                  @click="seachHistory()"
                  v-on:keyup.enter="seachHistory()">查询</a-Button>
      </div>
    </div>
    <div class="chosedEParam flex-r"
         style="justifyContent:flex-end;">
      <div v-for="(param, index) in params"
           :key="index"
           class="flex-r"
           @click="Eparam=param.name"
           style="cursor:pointer;">
        <div style="width:0.24rem;height:0.02rem;"
             :style="{background:Eparam===param.name?'#1890FF':'rgba(255,255,255,0.60)'}">
        </div>
        <div style="width:0.12rem;height:0.12rem;background:#1890FF;borderRadius:0.06rem;padding:0.02rem;position:relative;left:-0.18rem;"
             :style="{background:Eparam===param.name?'#1890FF':'#eee'}">
          <div style="width:0.08rem;height:0.08rem;background:white;borderRadius:0.03rem;"
               :style="{background:Eparam===param.name?'white':'#bbb'}">
          </div>
        </div>
        <span style="marginRight:0.12rem;"
              :style="{color:Eparam===param.name?'white':'rgba(255,255,255,0.3)'}">{{param.name}}</span>
      </div>
    </div>
    <!-- 图表 -->
    <div id="EH">
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import MixinWL from '../../store/wl/mixinsWl.js'
import { stringTime } from '../../common/js/commont.js'
import { Column } from '@antv/g2plot'
export default {
  mixins: [MixinWL],
  props: ['params', 'code'],
  data () {
    return {
      Eparam: 'AQI',
      dateType: 'H',
      time: ['time1', 'time2'],
      minTime: '',
      maxTime: '',
      dataArr: ''
    }
  },
  methods: {
    moment,
    disabledDate (current) { // 日期禁止
      return current && current > moment().endOf('day') // 不能今天之后的日期
    },
    onChangeDate: function (date, dateString) { // 日均值日期选择
      // console.log(date)
      this.minTime = dateString[0]
      this.maxTime = dateString[1]
      console.log(this.minTime, this.maxTime)
    },
    seachHistory () {
      if (this.maxTime && this.minTime) {
        this.getHistoryData()
      } else {
        this.$message.info('时间不能为空')
      }
    },
    // 初始化图标用于操作
    initChart () {
      if (this.chart) {
        this.chart.destroy()
        this.createChart()
        this.chart.render()
      } else {
        this.createChart()
        this.chart.render()
      }
    },
    createChart () {
      var self = this
      console.log(self.dataArr)
      this.chart = new Column('EH', {
        data: self.dataArr,
        xField: 'time',
        yField: self.Eparam,
        xAxis: {
          label: {
            autoRotate: false
          }
        },
        scrollbar: {
          type: 'horizontal'
        }
      })
    },
    // 获取历史数据--------------------------------------------->
    getHistoryData () {
      if (this.dateType === 'D') {
        var s = new Date(this.maxTime).getTime() - new Date(this.minTime).getTime()
        if (s < 1000 * 60 * 60 * 24 * 7) {
          this.$message.warning('时间类型为天时,请间隔7天以上')
          return
        }
      }
      var ts = stringTime(new Date())
      var data = {
        account: window.localStorage.getItem('account'),
        codes: this.code,
        datetype: this.dateType,
        max_time: this.maxTime,
        min_time: this.minTime,
        params: this.Eparam,
        token: window.localStorage.getItem('token'),
        ts
      }
      this.getHistoryDeviceLog(data)
    }
  },
  watch: {
    // 监听设备id
    code () {
      this.$nextTick(() => {
        this.getHistoryData()
      })
    },
    // 监听数据渲染图表
    HistorydeviceLogWL (value) {
      this.$nextTick(() => {
        this.dataArr = value[this.code]
        this.dataArr.forEach(item => {
          var r = parseFloat(item[this.Eparam])
          item[this.Eparam] = r
          item.time = item.time.substring(5, 16)
        })
        this.initChart()
      })
    },
    // 监听参数
    Eparam () {
      this.$nextTick(() => {
        this.getHistoryData()
      })
    },
    // 监听时间类型
    dateType () {
      this.$nextTick(() => {
        this.getHistoryData()
      })
    }
  },
  created () {
    this.maxTime = stringTime(new Date())
    this.minTime = stringTime(new Date(new Date().getTime() - (1000 * 60 * 60 * 24)))
    this.getHistoryData()
  }
}
</script>

<style lang="less" scoped>
.choseTime {
  padding: 0 0.24rem;
  input {
    outline: none;
  }
  .dateTime {
    margin-right: 0.1rem;
    background: #405891;
  }
}
.chosedEParam {
  padding: 0 0.24rem;
  margin: 0.24rem 0;
  font-size: 0.12rem;
  width: 100%;
  flex-wrap: wrap;
}
#EH {
  width: 100%;
  padding: 0 0.05rem;
  overflow-x: auto;
  position: absolute;
  bottom: 0.1rem;
  @media (max-width: 1440px) {
    height: calc(100% - 5rem);
  }
  @media (min-width: 1440px) {
    height: calc(100% - 4.6rem);
  }
  @media (max-width: 1024px) {
    height: calc(100% - 6rem);
  }
}
#EH::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
#EH {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
</style>
